<template>
    <div id="code">
        <div class="code-border ">
            <img class="code-bg-img" src="../../assets/img/login/code_border.png" alt="">
            <img class="qrImag" :src="qrImag" alt=""/>
        </div>
        <div class="code-tips text-center">请使用微信扫一扫</div>
    </div>
</template>

<script>
export default {
    props: {
        qrImag: {
            type: String,
            default: ''
        }
    },
    name: "codeLogin",
    data () {
        return {}
    }
}
</script>

<style lang="scss">
#code {
    .code-border {
        // background-image: url(../../assets/img/login/code_border.png);
        // background-size: cover;
        width: 18.847vw;
        height: 18.847vw;
        margin: 0 auto;
        position: relative;
        .code-bg-img{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
        }
        .qrImag {
            width: 16.667vw;
            height: 16.667vw;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            position: absolute;
            z-index: 200;
        }
    }
    .code-tips {
        font-size: 1.042vw;
        color: #303234;
        line-height: 2.847vw;
        margin-top: 2.222vw;
    }
    .code-tips {
        font-size: 1.042vw;
        color: #303234;
        line-height: 2.847vw;
        margin-top: 2.222vw;
    }
}
</style>
